<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib  prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib  prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="srcPath" value="${redis:getSysConfig('sysFileVisitRoot_back')}"/>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<c:set var="uploadPath" value="${redis:getSysConfig('uploadFileVisitRoot')}"/>
<c:set var="htmlPath" value="${redis:getSysConfig('in_path_html')}"/>
<c:set var="defaultImg" value="${redis:getSysConfig('website_default_img')}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>系统欢迎页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shopjsp icon" href="${srcPath}/common/images/sj.ico"/>
	<script type="text/javascript" src="${srcPath}/common/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${srcPath}/3thParty/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="${srcPath}/3thParty/echarts/welcome.js"></script>
</head>

<body style="background: #FFFFFF;">
	<div class="welcome" >
		<!-- <h1 class="title_t">系统欢迎页</h1> -->
		<div class="show">
			<p style="text-align: center;line-height: 30px;height: 30px;">
			<span onclick="show('pie');" style="background-color:#2e9bf2; width: 191px;cursor:pointer; height:16px;font-size:12px; padding:6px 0; vertical-align:middle; color:#fff; border-radius:3px;">&nbsp;&nbsp;饼状图&nbsp;&nbsp;</span>
			<span onclick="show('bar');" style="background-color:#2e9bf2; width: 191px;cursor:pointer; height:16px;font-size:12px; padding:6px 0; vertical-align:middle; color:#fff; border-radius:3px;">&nbsp;&nbsp;柱状图&nbsp;&nbsp;</span>
			</p>
		</div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="display:none;margin: 20px auto auto auto;width: 1050px;height:480px;background-color: #99BBE8">
		</div>
		<div id="maindouble" style="display:none;margin: 20px auto auto auto;width: 1050px;height:480px;background-color: #ffffff">
			<div id="mainleft" style="margin-right: 0px;width: 520px;height:460px;float: left">
			</div>
			<div id="mainright" style="margin-right: 10px;width: 520px;height:460px;float: left">
			</div>
		</div>
	</div>

	<script type="text/javascript">
        var type = 'bar';//默认饼状图
        var myChart;
        var myChartLeft;
        var myChartRight;
        var statisticsList;//统计项（json串格式）
        var statisticsType;//统计分类（json串格式）
        window.onload = function () {
            //统计项（json串格式）
            $.ajax({
                type:"post",
                dataType:"json",
                url:"${basePath}/back/statistics/initStatisticsHome.sjson",
                success:function(result){
                    //统计项（json串格式）
                    statisticsList = result.statisticsList;
                    myChart = echarts.init(document.getElementById('main'));
                    myChartLeft = echarts.init(document.getElementById('mainleft'));
                    myChartRight = echarts.init(document.getElementById('mainright'));
                    //statisticsList统计项，statisticsType统计分类，该两项属性为自定义数据，此处数据只为展示效果
                    //统计分类（json串格式）
                    statisticsType = '[{"keyBookId":223,"name":"一周动态","type":"statisticsType","typeName":"后台首页模块类型","value":"1"},{"keyBookId":224,"name":"商城统计","type":"statisticsType","typeName":"后台首页模块类型","value":"2"}]';
                    if(statisticsList != null && statisticsList != '') statisticsList = JSON.parse(statisticsList);//解析
                    if(statisticsType != null && statisticsType != '') statisticsType = JSON.parse(statisticsType);//解析
                    show('pie');//默认饼状图
                }
            });
        };

        function show(param){
            if('pie'==param && 'bar'==type){
                myChartLeft.clear();
                myChartRight.clear();
                $("#maindouble").hide();
                $("#main").show();
                pie(statisticsList,statisticsType,myChart);
                type = param;
            }else if('bar'==param && 'pie'==type){
                myChart.clear();
                $("#main").hide();
                $("#maindouble").show();
                bar(statisticsList,statisticsType,myChartLeft,myChartRight);
                type = param;
            }
        }
	</script>
</body>
</html>

